<!--
 * @Descripttion: 
 * @version: v1.0.0.0
 * @Author: 袁佳阳
 * @Date: 2020-03-31 14:39:01
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-06-02 23:26:54
 -->
<template>
  <div>
    <div class="top-box">
      <el-button v-if="showMini" size="mini" type="success" @click="generateMiniQrcode"> 小程序码 </el-button>
      <el-button size="mini" type="success" @click="generateH5Qrcode"> H5二维码 </el-button> &nbsp; &nbsp; 
      <el-cascader v-model="channelsOne" :options="channels" size="mini" expand-trigger="hover" class="user-input" clearable placeholder="渠道测评码" style="margin-right: 20px" @change="generateWxQrcode" />
    </div>

    <div class="app-container">
      <!-- 头部信息 -->
      <eHeader :query="query" :sup_this="supThis" />
      <div class="fl empty-10" />
      <div>
        <div class="fl cb-border" style="width:600px;">
          <!-- 类型选择框 -->
          <el-checkbox :indeterminate="isTypeIndeterminate" v-model="checkAllType" class="fl" @change="handleCheckAllTypeChange">全选</el-checkbox>
          <el-checkbox-group v-model="checkedTypes" class="fl margin-l30" @change="handleCheckedTypeChange">
            <el-checkbox v-for="(type, index) in types" :label="index" :key="index">{{ type }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="fl empty-10" />
        <div class="fl cb-border" style="width:600px;">
          <!-- 状态选择框 -->
          <el-checkbox :indeterminate="isStatusIndeterminate" v-model="checkAllStatus" class="fl" @change="handleCheckAllStatusChange">全选</el-checkbox>
          <el-checkbox-group v-model="checkedStatus" class="fl margin-l30" @change="handleCheckedStatusChange">
            <el-checkbox v-for="(status, index) in statuses" :label="index" :key="index">{{ status }}</el-checkbox>
          </el-checkbox-group> 
        </div>
        <!--分页组件-->
        <el-pagination
          :total="total"
          :page-size="limit"
          layout="total, prev, pager, next, sizes"
          class="fr"
          @size-change="sizeChange"
          @current-change="pageChange"/>
      </div>
      <div class="fl empty-5" />
      <el-table v-loading.body="loading" :data="data" border style="width: 100%">
        <el-table-column prop="id" label="服务ID" width="80" />
        <el-table-column prop="status_text" label="服务状态" />
        <el-table-column prop="delivery_name" label="姓名" />
        <el-table-column prop="nick_name" label="用户昵称" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="type_text" label="类型" />
        <el-table-column prop="service_day_text" label="服务天数" />
        <el-table-column prop="is_purchase" label="是否复购" />
        <el-table-column prop="dietitian" label="所属营养师">
          <template slot-scope="scope">
            {{ scope.row.dietitian }}
            <updatePrincipal v-permission="['ADMIN']" :principal="+scope.row.principal" :service-id="+scope.row.id" @init="init" />
          </template>
        </el-table-column>
        <el-table-column label="备注" width="180">
          <template slot-scope="scope">
            <span v-html="scope.row.service_remark" /> <remark :data="scope.row" @init="init" />
          </template>
        </el-table-column>
        <el-table-column prop="from" label="来源" />
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="serviceDetail(scope.row.id)">查看详情 </el-button>
            <el-popover
              placement="bottom-end"
              width="220"
              trigger="click"
            >
              <el-button slot="reference" type="danger" size="mini">更多 <i class="el-icon-arrow-down el-icon--right" /></el-button>
              <el-popconfirm v-permission="['ADMIN']" title="确定删除本条数据吗？" @onConfirm="handleDelete(scope.row.id)">
                <el-button slot="reference" type="danger" size="mini">删除</el-button>
              </el-popconfirm>
              <edit :data="scope.row" :sup_this="supThis" class="fl margin-l10" />
              <syncEval :service-id="+scope.row.id" :sup-this="supThis" class="fl margin-l10 margin-t10" />
              <!-- <el-button type="primary" size="mini" class="fl margin-l10 margin-t10">同步侧评</el-button> -->
              <!-- <el-button type="primary" size="mini" class="fl margin-l10 margin-t10">更多信息</el-button> -->
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      
      <!--分页组件-->
      <el-pagination
        :total="total"
        :page-size="limit"
        style="margin-top: 8px; float:right;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>
    <!-- 二维码 & 小程序码 -->
    <el-dialog :visible.sync="qrcodeShow" :title="qrcodeTitle" width="500px" class="qcode">
      <div v-if="qrLoading" class="current-code">
        <img src="../../../assets/img/loading.gif" style="width:50px;height:50px;">
      </div>
      <div v-else class="five-code">
        <img :src="qrcode">
      </div>
    </el-dialog>
  </div>
</template>
<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'
import eHeader from './module/header'
import edit from './module/edit'
import remark from './module/remark'
import syncEval from './module/syncEval'
import updatePrincipal from './module/updatePrincipal'

export default {
  components: {
    eHeader, edit, remark, syncEval, updatePrincipal
  },
  mixins: [initData],
  data() {
    return {
      query: {
        delivery_name: '',
        nick_name: '',
        phone: ''
      },
      supThis: this,
      qrcodeTitle: '',
      articleRow: {},
      channels: [],
      channelsOne: [],
      delLoading: false,
      qrLoading: false,
      qrcodeShow: false,
      showMini: false,
      qrcode: '',
      limit: 20,
      isTypeIndeterminate: false,
      isStatusIndeterminate: false,
      checkAllType: false,
      checkedTypes: [],
      types: {},
      typesKey: [],
      secondChannels: [],
      checkAllStatus: false,
      checkedStatus: [],
      statuses: [],
      statusesKey: [],
    }
  },
  created() {
    this.initParams()
    this.getChannels()
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    checkPermission,
    beforeInit() {
      this.url = '/admin/v1/service'
      const sort = 'id,desc'
      this.params = { page: this.page, limit: this.limit, sort: sort, type: this.checkedTypes, status: this.checkedStatus }
      const query = this.query
      console.log(query)
      for (const k in query) {
        console.log(query)
        if (query[k]) { this.params[k] = query[k] }
      }
      
      return true
    },
    initParams() {
      this.$api.order.service
        .params({
          params: { keys: ['types', 'statuses', 'show_mini'] }
        })
        .then(res => {
          this.types = res.data.types
          this.typesKey = Object.keys(this.types)
          this.statuses = res.data.statuses
          this.statusesKey = Object.keys(this.statuses)
          this.showMini = res.data.show_mini
        }).catch(err => {
          console.log(err)
        })

      //查询渠道信息
      this.$api.enterprise.channel
        .cascadeSecond({
          params: { status: 1 }
        })
        .then(res => {
          this.secondChannels = res.data.channels
        }).catch(err => {
          console.log(err)
        })
    },
    getChannels() {
      //获取三级渠道信息
      this.$api.enterprise.channel
        .cascadeThree({
          params: {
            redirect_type: 1,
            status: 1
          }
        })
        .then(res => {
          this.channels = res.data
        }).catch(err => {
          console.log(err)
        })
    },
    generateWxQrcode(channel) {
      this.qrcodeTitle = '五维测评二维码'
      this.qrcode = ''
      this.qrLoading = true
      this.qrcodeShow = true
      this.$api.enterprise.channel
        .generateWxQrcode(channel[2])
        .then(res => {
          this.qrcode = res.data.url
          this.qrLoading = false
        }).catch(err => {
          console.log(err)
          this.qrLoading = false
        })
    },
    generateMiniQrcode() {
      this.qrcodeTitle = '小程序码'
      this.qrcode = ''
      this.qrLoading = true
      this.qrcodeShow = true
      this.$api.enterprise.channel
        .generateMiniQrcode()
        .then(res => {
          this.qrcode = res.data.url
          this.qrLoading = false
        }).catch(err => {
          console.log(err)
          this.qrLoading = false
        })
    },
    generateH5Qrcode() {
      this.qrcodeTitle = 'H5二维码'
      this.qrcode = ''
      this.qrLoading = true
      this.qrcodeShow = true
      this.$api.enterprise.enterprise
        .generateQrcode()
        .then(res => {
          this.qrcode = res.data.qrcode_url
          this.qrLoading = false
        }).catch(err => {
          console.log(err)
          this.qrLoading = false
        })
    },
    serviceDetail(id) {
      this.$router.push('/order/serviceDetail/' + id + '?tab=punch')
    },
    handleDelete(id) {
      this.delLoading = true
      this.$api.order.service
        .del(id)
        .then(res => {
          this.delLoading = false
          this.init()
          this.$notify({ title: '删除成功', type: 'success', duration: 2500 })
        }).catch(err => {
          this.delLoading = false
          console.log(err.response.data.message)
        })
    },
    handleChange(e) {
      console.log(e)
    },
    handleCheckAllTypeChange(val) {
      this.checkedTypes = val ? this.typesKey : []
      this.isTypeIndeterminate = false
      this.init()
    },
    handleCheckedTypeChange(value) {
      const checkedCount = value.length
      this.checkAllType = checkedCount === this.typesKey.length
      this.isTypeIndeterminate = checkedCount > 0 && checkedCount < this.typesKey.length
      this.init()
    },
    handleCheckAllStatusChange(val) {
      this.checkedStatus = val ? this.statusesKey : []
      this.isStatusIndeterminate = false
      this.init()
    },
    handleCheckedStatusChange(value) {
      const checkedCount = value.length
      this.checkAllStatus = checkedCount === this.statusesKey.length
      this.isStatusIndeterminate = checkedCount > 0 && checkedCount < this.statusesKey.length
      this.init()
    }
  }
}
</script>
<style>
.qrcode {
  width: 500px;
}
.qcode .el-dialog__body {
  text-align: center;
}
.five-code img{
  width: 70%;
  border:1px solid #d9d9d9;
}
</style>
